<template>
  <div class="mine">
		<div class="mineInfo">
			<div class="mineInfo-img">
				<img src="../assets/img/login-logo.png"/>
			</div>
			<div class="mineInfo-name" v-text="userRealName"></div>
			<div class="mineInfo-address" v-text="committee"></div>
			<!--<router-link to="/pushInfoList">
				<span class="iconfont info">&#xe629;</span>
			</router-link>-->
		</div>
		
		<div class="infoDirect">
			<router-link to="/ranking" class="detailInfoDirect">
				<cell title="星级排名" is-link>
	        <img slot="icon" width="15" style="display:block;margin-right:5px;" src="../assets/img/rankingIcon.png">
	      	<!--<badge text="19"></badge>-->
				</cell>
			</router-link>
			<router-link to="" class="detailInfoDirect">
				<cell title="我阅读过的" is-link>
	        <img slot="icon" width="15" style="display:block;margin-right:5px;" src="../assets/img/readedIcon.png">
	      	<!--<badge text="19"></badge>-->
				</cell>
			</router-link>
			<router-link to="/pushInfoList" class="detailInfoDirect">
				<cell title="消息中心" is-link>
	        <img slot="icon" width="15" style="display:block;margin-right:5px;" src="../assets/img/pushInfo.png">
	      	<!--<badge text="19"></badge>-->
				</cell>
			</router-link>
			<router-link to="/setting" class="detailInfoDirect">
				<cell title="设置" is-link>
	        <img slot="icon" width="15" style="display:block;margin-right:5px;" src="../assets/img/settingIcon.png">
				</cell>
			</router-link>
		</div>
			<commonFooter :activeIndex="3"></commonFooter>
		
	</div>
</template>

<script>
import Api from 'assets/js/api';
import init from '../assets/js/init';
import commonFooter from './common/footer';
import { Cell, CellBox, CellFormPreview, Group, Badge } from 'vux'

var api = new Api();

export default {
  name: 'mine',
  data () {
    return {
			userRealName:'',
			committee:'',
    }
  },
  activated(){
		this.userRealName = localStorage.getItem('userRealName');//获取用户真实姓名
		this.committee = localStorage.getItem('committee');//获取用户隶属的委员会机构
  },
  methods:{
  	
  },
  components:{
		commonFooter,
		Group,
    Cell,
    CellFormPreview,
    CellBox,
    Badge
  },
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	@import url("../assets/css/common.css");
	.mine{
		height: 100%;
	}
	.mine .info{
		position: absolute;
		right: 0.5rem;
		top: 0.5rem;
		color: #fff;
	}
	.mineInfo{
		width: 100%;
		height: 7rem;
		background-color: #f00;
		border: 1px solid #f00;
	}
	.mineInfo-img{
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		border: 0.125rem solid #f00;
		background-color: #f00;
		margin: 0.5rem auto 0;
	}
	.mineInfo-img img{
		max-height: 100%;
		max-width: 100%;
		border-radius: 50%;
	}
	.mineInfo-name{
		color: #fff;
		font-size: 0.7rem;
		text-align: center;
		margin-top: 0.5rem;
	}
	.mineInfo-address{
		color: #fff;
		font-size: 0.6rem;
		text-align: center;
		margin-top: 0.5rem;
	}
	
	.infoDirect{
		width: 100%;
		box-sizing: border-box;
		padding: 0.5rem 0;
	}
	.infoDirect .weui-cell{
		background-color: #fff;
	}
	
	.detailInfoDirect{
		display: block;
		color: #666;
		margin-bottom: 0.5rem;
	}
	
	.vux-label{
		font-size: 0.7rem;
	}
</style>
